<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>[实战]50图片处理</title>
    <link rel="stylesheet" href="src/myphoto.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_924531_bjux84rbnan.css">
</head>

<body>
    <div class="myphoto">
        <div class="tools">
            <div class="upimg" @click="upfile"><i class="mhicon icon-uparrow"></i>上传图片</div>
            <div class="save" @click="savepic"><i class="mhicon icon-droparrow"></i>保存图片</div>
        </div>
        <div class="photoarea" id="photoarea">
            <div class="err" v-if="err" v-cloak>请上传图片</div>
            <div class="load" v-if="loadding" v-cloak><img src="src/loading.gif"></div>
        </div>
        <div class="effects">
            <ul>
                <li @click="chuli(1)"><img src="src/google/0.png">原图</li>
                <li @click="chuli(2)"><img src="src/google/1.png">亮度对比度</li>
                <li @click="chuli(3)"><img src="src/google/2.png">锐化</li>
                <li @click="chuli(4)"><img src="src/google/3.png">噪点</li>
                <li @click="chuli(5)"><img src="src/google/4.png">褐色</li>
                <li @click="chuli(6)"><img src="src/google/5.png">晕影</li>
                <li @click="chuli(7)"><img src="src/google/6.png">高斯模糊</li>
                <li @click="chuli(8)"><img src="src/google/7.png">放射性模糊</li>
                <li @click="chuli(9)"><img src="src/google/8.png">墨水</li>
                <li @click="chuli(10)"><img src="src/google/9.png">彩色半调</li>
                <li @click="chuli(11)"><img src="src/google/10.png">点状网</li>
                <li @click="chuli(12)"><img src="src/google/11.png">马赛克</li>
                <li @click="chuli(13)"><img src="src/google/12.png">边缘</li>
                <li @click="chuli(14)"><img src="src/google/13.png">延时移轴</li>
                <li @click="chuli(15)"><img src="src/google/14.png">降噪</li>
                <li @click="chuli(16)"><img src="src/google/15.png">镜头模糊</li>
                <li @click="chuli(17)"><img src="src/google/16.png">旋转</li>
                <li @click="chuli(18)"><img src="src/google/17.png">鼓起/收缩</li>
                <li @click="chuli(19)"><img src="src/google/18.png">灰度</li>
            </ul>
        </div>
        <input id="upfile" @change="change" type="file" name="" accept="image/gif, image/jpeg" style="display: none">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="src/glfx.js"></script>
    <script>
    new Vue({
        el: '.myphoto',
        data: {
            width: 0,
            height: 0,
            loadding: false,
            err: false,
            src: '',//保存上传图片地址
            filename:'',//下载文件名
            effect:'noeffect',//选择处理效果 最终保存的文件名称=filename+effect
        },
        mounted() {
            // var effects = document.getElementsByClassName('effects')
            // var li = effects[0].children[0].children
            // var arrli = Array.from(li)
            // arrli.forEach(function(el, index) {
            //     var imgs = new Image();
            //     imgs.src = el.children[0].getAttribute('src');
            //     imgs.onload = function() {
            //         var canvas = fx.canvas();
            //         var w = imgs.width
            //         var h = imgs.height
            //         var texture = canvas.texture(imgs);
            //         canvas.draw(texture)
            //         var num = index + 1
            //         if (num == 1) {

            //         } else if (num == 2) {
            //             canvas.brightnessContrast(0, 1)
            //         } else if (num == 3) {
            //             canvas.unsharpMask(200, 5)
            //         } else if (num == 4) {
            //             canvas.noise(0.5)
            //         } else if (num == 5) {
            //             canvas.sepia(1)
            //         } else if (num == 6) {
            //             canvas.vignette(0.5, 0.5)
            //         } else if (num == 7) {
            //             canvas.triangleBlur(23)
            //         } else if (num == 8) {
            //             canvas.zoomBlur(w / 2, h / 2, 0.62)
            //         } else if (num == 9) {
            //             canvas.ink(0.5)
            //         } else if (num == 10) {
            //             canvas.colorHalftone(w / 2, h / 2, 0.25, 4)
            //         } else if (num == 11) {
            //             canvas.dotScreen(w / 2, h / 2, 1.1, 3)
            //         } else if (num == 12) {
            //             canvas.hexagonalPixelate(w / 2, h / 2, 50)
            //         } else if (num == 13) {
            //             canvas.edgeWork(10)
            //         } else if (num == 14) {
            //             canvas.tiltShift(0, 0, w, h, 50, h / 2)
            //         } else if (num == 15) {
            //             canvas.denoise(4)
            //         } else if (num == 16) {
            //             canvas.lensBlur(11, 1, 1)
            //         } else if (num == 17) {
            //             canvas.swirl(w/2, h/2, w/2, -7.7)
            //         } else if (num == 18) {
            //             canvas.bulgePinch(w/2, h/2, h/2, 1)
            //         }
            //         canvas.update();
            //         el.insertBefore(canvas, el.children[0])
            //         el.removeChild(el.children[1])
            //     }
            // })
        },
        computed: {
            max() {
                return {
                    'max-width': '80vw',
                    'max-height': '80vh'
                }
            }
        },
        watch: {
            src: {
                immediate: true,
                handler(value) {
                    if (value == '') {
                        //this.err=true
                    }
                }
            }
        },
        methods: {
            savepic() {
                var _this = this
                var canvas = document.getElementById('photoarea').getElementsByTagName('canvas')[0]
                if (canvas != undefined) {
                    canvas.update(); //一定要加，不然弄出来是空空的黑色
                    var lastpic
                    canvas.toBlob(function(blob) {
                        lastpic = URL.createObjectURL(blob)
                        _this.funDownload(lastpic, _this.filename+'_'+_this.effect)
                    }, 'image/jpeg', 0.95);
                } else {
                    this.err = true
                    var _this = this
                    setTimeout(function() {
                        _this.err = false
                    }, 2000)
                }
            },
            funDownload(domImg, filename) {
                var eleLink = document.createElement('a');
                eleLink.download = filename;
                eleLink.style.display = 'none';
                eleLink.href = domImg;
                eleLink.click();
            },
            chuli(num) {
                var li=document.getElementsByClassName('effects')[0].getElementsByTagName('li')
                for(i=0;i<li.length;i++){
                    li[i].classList.remove('on')
                    var mark=li[i].getElementsByClassName('mark')
                    if(mark.length>0){
                        mark[0].parentNode.removeChild(mark[0])
                    }
                }
                li[num-1].classList.add('on')
                var mark=document.createElement('div')
                mark.classList.add('mark')
                li[num-1].appendChild(mark)
                if (this.src != '') {
                    var _this = this
                    var imgs = new Image();
                    imgs.src = this.src;
                    imgs.onload = function() {
                        var canvas = document.getElementById('photoarea').getElementsByTagName('canvas')[0];
                        var w = canvas.width
                        var h = canvas.height
                        var texture = canvas.texture(imgs);
                        canvas.draw(texture)
                        if (num == 1) {
                            _this.effect='noeffect'

                        } else if (num == 2) {
                            _this.effect='亮度对比度'
                            canvas.brightnessContrast(0, 1)
                        } else if (num == 3) {
                            _this.effect='锐化'
                            canvas.unsharpMask(200, 5)
                        } else if (num == 4) {
                            _this.effect='噪点'
                            canvas.noise(0.5)
                        } else if (num == 5) {
                            _this.effect='褐色'
                            canvas.sepia(1)
                        } else if (num == 6) {
                            _this.effect='晕影'
                            canvas.vignette(0.6, 0.6)
                        } else if (num == 7) {
                            _this.effect='高斯模糊'
                            canvas.triangleBlur(23)
                        } else if (num == 8) {
                            _this.effect='放射性模糊'
                            canvas.zoomBlur(w / 2, h / 2, 0.6)
                        } else if (num == 9) {
                            _this.effect='墨水'
                            canvas.ink(0.5)
                        } else if (num == 10) {
                            _this.effect='彩色半调'
                            canvas.colorHalftone(w / 2, h / 2, 0.25, 4)
                        } else if (num == 11) {
                            _this.effect='点状网'
                            canvas.dotScreen(w / 2, h / 2, 1.1, 3)
                        } else if (num == 12) {
                            _this.effect='马赛克'
                            canvas.hexagonalPixelate(w / 2, h / 2, 20)
                        } else if (num == 13) {
                            _this.effect='边缘'
                            canvas.edgeWork(2)
                        } else if (num == 14) {
                            _this.effect='延时移轴'
                            canvas.tiltShift(0, 0, w, h, 50, h / 2)
                        } else if (num == 15) {
                            _this.effect='降噪'
                            canvas.denoise(12)
                        } else if (num == 16) {
                            _this.effect='镜头模糊'
                            canvas.lensBlur(11, 1, 1)
                        } else if (num == 17) {
                            _this.effect='旋转'
                            canvas.swirl(w / 2, h / 2, h/2, -9)
                        } else if (num == 18) {
                            _this.effect='鼓起'
                            canvas.bulgePinch(w/2, h/2, h/2, 1)
                        } else if (num == 19) {
                            _this.effect='灰度'
                            canvas.hueSaturation(1, -1)
                        }
                        canvas.update();
                    }

                } else {
                    this.err = true
                    var _this = this
                    setTimeout(function() {
                        _this.err = false
                    }, 2000)
                    return
                }

            },
            upfile() {
                document.getElementById('upfile').click()
            },
            change() {
                var _this = this
                if (event.target.files[0] == undefined) {
                    return
                }
                this.loadding = true
                //file控件改变
                var imgurl = window.URL.createObjectURL(event.target.files[0])
                this.filename=event.target.files[0].name.split('.')[0]
                var imgs = new Image();
                imgs.src = imgurl;
                imgs.onload = function() {
                    setTimeout(function() {
                        _this.src = imgurl;
                        _this.loadding = false
                        var canvas = fx.canvas();
                        var texture = canvas.texture(imgs);
                        canvas.draw(texture)
                        canvas.update();
                        var cc = document.getElementById('photoarea').getElementsByTagName('canvas')
                        if (cc.length == 1) {
                            cc[0].parentNode.removeChild(cc[0])
                            document.getElementById('photoarea').appendChild(canvas)
                        } else {
                            document.getElementById('photoarea').appendChild(canvas)
                        }
                    }, 1000)

                }

            },
        }
    })
    </script>
</body>

</html>
